import React, { Component } from 'react';
import TodoListUI from './TodoListUi'

import store from '../store';
// import { CHANGE_INPUT , ADD_ITEM , DELETE_ITEM } from '../store/actionTypes';
import {changeInputAction , addItemAction ,deleteItemAction, getTodoList} from '../store/actionCreators'

class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state=store.getState()
        store.subscribe(this.storeChange)
    }

    componentDidMount() {
        const action = getTodoList()
        store.dispatch(action)
    }

    onChange = (e) => {
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }

    onClick = () => {
        const action = addItemAction()
        store.dispatch(action)
    }

    storeChange = () => {
        this.setState(store.getState())
    }

    deleteItem = (idx) => {
        const action = deleteItemAction(idx)
        store.dispatch(action)
    }

    render() { 
        return ( 
            <TodoListUI 
                inputValue={this.state.inputValue}
                list={this.state.list}
                onChange={this.onChange}
                onClick={this.onClick}
                deleteItem={this.deleteItem}
            />
         );
    }
}
export default TodoList